<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Remote Data via DataSource</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Remote Data via DataSource</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#ac-input { width: 250px; }
</style>

<div class="intro">
<p>
This example demonstrates how to provide autocomplete suggestions using a <a href="../datasource/index.html">DataSource</a> instance. While AutoComplete supports a variety of result sources without requiring a DataSource, using a DataSource can give you more control over how results are retrieved and processed, and also allows you to share data with other DataSource-based widgets on the page.
</p>

<p>
Type the name of a band or musician to see results from <a href="http://music.yahoo.com/">Yahoo! Music</a>. Can't think of one? Try some of my favorites: Dandy Warhols, Black Rebel Motorcycle Club, The Morning After Girls, Dr. Theopolis, or Echo &amp; the Bunnymen.
</p>
</div>

<div class="example">
    <div id="demo" class="yui3-skin-sam">
  <label for="ac-input">Music artist:</label><br>
  <input id="ac-input" type="text">
</div>

<script>
YUI().use('autocomplete', 'autocomplete-highlighters', 'datasource-get', function (Y) {
  // Create a DataSource instance.
  var ds = new Y.DataSource.Get({
    source: 'http://query.yahooapis.com/v1/public/yql?format=json'
  });

  Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
    maxResults: 10,
    resultHighlighter: 'wordMatch',
    resultTextLocator: 'name',

    // Use the DataSource instance as the result source.
    source: ds,

    // YQL query to use for each request (URL-encoded, except for the
    // {query} placeholder). This will be appended to the URL that was supplied
    // to the DataSource's "source" config above.
    requestTemplate: '&q=select%20*%20from%20music.artist.search%20where%20keyword%3D%22{query}%22',

    // Custom result list locator to parse the results out of the YQL response.
    // This is necessary because YQL sometimes returns an array of results, and
    // sometimes just a single result that isn't in an array.
    resultListLocator: function (response) {
      var results = response[0].query.results &&
            response[0].query.results.Artist;

      if (results && !Y.Lang.isArray(results)) {
        results = [results];
      }

      return results || [];
    }
  });
});
</script>

</div>

<h2>HTML</h2>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
  &lt;label for=&quot;ac-input&quot;&gt;Music artist:&lt;&#x2F;label&gt;&lt;br&gt;
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
&lt;&#x2F;div&gt;</pre>


<h2>JavaScript</h2>

<pre class="code prettyprint">YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-highlighters&#x27;, &#x27;datasource-get&#x27;, function (Y) {
  &#x2F;&#x2F; Create a DataSource instance.
  var ds = new Y.DataSource.Get({
    source: &#x27;http:&#x2F;&#x2F;query.yahooapis.com&#x2F;v1&#x2F;public&#x2F;yql?format=json&#x27;
  });

  Y.one(&#x27;#ac-input&#x27;).plug(Y.Plugin.AutoComplete, {
    maxResults: 10,
    resultHighlighter: &#x27;wordMatch&#x27;,
    resultTextLocator: &#x27;name&#x27;,

    &#x2F;&#x2F; Use the DataSource instance as the result source.
    source: ds,

    &#x2F;&#x2F; YQL query to use for each request (URL-encoded, except for the
    &#x2F;&#x2F; {query} placeholder). This will be appended to the URL that was supplied
    &#x2F;&#x2F; to the DataSource&#x27;s &quot;source&quot; config above.
    requestTemplate: &#x27;&amp;q=select%20*%20from%20music.artist.search%20where%20keyword%3D%22{query}%22&#x27;,

    &#x2F;&#x2F; Custom result list locator to parse the results out of the YQL response.
    &#x2F;&#x2F; This is necessary because YQL sometimes returns an array of results, and
    &#x2F;&#x2F; sometimes just a single result that isn&#x27;t in an array.
    resultListLocator: function (response) {
      var results = response[0].query.results &amp;&amp;
            response[0].query.results.Artist;

      if (results &amp;&amp; !Y.Lang.isArray(results)) {
        results = [results];
      }

      return results || [];
    }
  });
});</pre>


<h2>Complete Example Source</h2>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
  &lt;label for=&quot;ac-input&quot;&gt;Music artist:&lt;&#x2F;label&gt;&lt;br&gt;
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
&lt;&#x2F;div&gt;

&lt;script&gt;
YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-highlighters&#x27;, &#x27;datasource-get&#x27;, function (Y) {
  &#x2F;&#x2F; Create a DataSource instance.
  var ds = new Y.DataSource.Get({
    source: &#x27;http:&#x2F;&#x2F;query.yahooapis.com&#x2F;v1&#x2F;public&#x2F;yql?format=json&#x27;
  });

  Y.one(&#x27;#ac-input&#x27;).plug(Y.Plugin.AutoComplete, {
    maxResults: 10,
    resultHighlighter: &#x27;wordMatch&#x27;,
    resultTextLocator: &#x27;name&#x27;,

    &#x2F;&#x2F; Use the DataSource instance as the result source.
    source: ds,

    &#x2F;&#x2F; YQL query to use for each request (URL-encoded, except for the
    &#x2F;&#x2F; {query} placeholder). This will be appended to the URL that was supplied
    &#x2F;&#x2F; to the DataSource&#x27;s &quot;source&quot; config above.
    requestTemplate: &#x27;&amp;q=select%20*%20from%20music.artist.search%20where%20keyword%3D%22{query}%22&#x27;,

    &#x2F;&#x2F; Custom result list locator to parse the results out of the YQL response.
    &#x2F;&#x2F; This is necessary because YQL sometimes returns an array of results, and
    &#x2F;&#x2F; sometimes just a single result that isn&#x27;t in an array.
    resultListLocator: function (response) {
      var results = response[0].query.results &amp;&amp;
            response[0].query.results.Artist;

      if (results &amp;&amp; !Y.Lang.isArray(results)) {
        results = [results];
      }

      return results || [];
    }
  });
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="How to provide autocomplete suggestions from a local array.">
                                        <a href="ac-local.html">Basic Local Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a remote JSONP source.">
                                        <a href="ac-jsonp.html">Remote Data via JSONP</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a YQL query source.">
                                        <a href="ac-yql.html">Remote Data via YQL</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a DataSource instance.">
                                        <a href="ac-datasource.html">Remote Data via DataSource</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to implement delimited tag completion.">
                                        <a href="ac-tagging.html">Tag Completion Using Query Delimiters</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter.">
                                        <a href="ac-flickr.html">Find Photos on Flickr (Custom Formatting, YQL Source)</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use autocomplete-base to filter a set of existing items on a page.">
                                        <a href="ac-filter.html">Filter a Set of Existing Items on a Page</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
